<template>
  <CommonContainer :style="customStyle" title="审批进度" v-if="flows && flows.length > 0">
    <div>
      <el-timeline :reverse="true">
        <el-timeline-item v-for="(activity, index) in flows" :key="index" :color="
                        activity.auditResults == '拒绝'
                            ? '#F5222D'
                            : activity.nodeType == 3 || activity.nodeType == 4
                            ? '#DADADA'
                            : activity.nodeType == 1
                            ? '#1890FF'
                            : activity.nodeType == 2
                            ? '#1890FF'
                            : ''
                    ">
          <div class="status">
            <span class="name" v-if="
                                activity.nodeType !== 3 &&
                                activity.nodeType !== 4
                            ">{{ activity.assignee }}
            </span>
            <span class="comp">
              {{ activity.activityName }}
            </span>
          </div>
          <span style="line-height: 23px; color: #666666" v-if="activity.endTime" class="time">
            {{ activity.endTime }}
          </span>
          <div v-if="activity.nodeType == 3 || activity.nodeType == 4" class="timeLineItem willAudit">
            待审核
          </div>
          <div v-else>
            <div v-if="activity.auditResults == '拒绝'" class="timeLineItem willAudit">
              <div class="unpass">拒绝</div>
              <div>
                原因：<span>{{ activity.message }}</span>
              </div>
            </div>
            <div v-else class="timeLineItem">
              <div class="pass">
                {{ activity.auditResults }}
              </div>
              <div class="willAudit" v-if="activity.message">
                原因：<span>{{ activity.message }}</span>
              </div>
            </div>
          </div>
          <!-- <div -->
          <!-- v-if=" -->
          <!-- activity.nodeType == 1 || activity.nodeType == 2 -->
          <!-- " -->
          <!-- > -->
          <!-- <div> -->
          <!-- <span v-if="activity.nodeType == 2"> -->
          <!-- {{ activity.activityName }} -->
          <!-- </span> -->
          <!-- {{ activity.assignee }} -->
          <!-- {{ activity.auditResults }} -->
          <!-- </div> -->
          <!-- <div v-if="activity.message"> -->
          <!-- 原因： {{ activity.message }} -->
          <!-- </div> -->
          <!-- <div class="timeLine_time" v-if="activity.endTime"> -->
          <!-- {{ activity.endTime }} -->
          <!-- </div> -->
          <!-- </div> -->
          <!-- <div -->
          <!-- v-if=" -->
          <!-- activity.nodeType == 3 || activity.nodeType == 4 -->
          <!-- " -->
          <!-- > -->
          <!-- 待{{ activity.activityName }}审核 -->
          <!-- </div> -->
        </el-timeline-item>
      </el-timeline>

      <!--                <el-timeline>-->
      <!--                    <el-timeline-item-->
      <!--                        v-for="(item, index) in flows"-->
      <!--                        :key="index"-->
      <!--                        color="#1890FF"-->
      <!--                        hide-timestamp-->
      <!--                    >-->
      <!--                        <div>-->
      <!--                            <p class="timelineItem">-->
      <!--                                <span class="recordContent" style="color: #333333">{{ item.assignee }}</span>-->
      <!--                                <span style="margin: 0 10px; color:#666666;">{{ item.nodeType == 1 ? '发起人' : '审批人' }}</span>-->
      <!--                                <span style="color: #999999">{{ item.endTime || item.startTime }}</span>-->
      <!--                            </p>-->
      <!--                            <div class="approveContent" v-if="item.auditResults">-->
      <!--                                <div style="color: #52C41A">{{ item.auditResults }}</div>-->
      <!--                                <div v-if="item.message">审批意见:{{ item.message }}</div>-->
      <!--                            </div>-->
      <!--                        </div>-->

      <!--                    </el-timeline-item>-->
      <!--                </el-timeline>-->
    </div>
  </CommonContainer>
</template>

<script>
import { FlowRecord } from "@/api/flowable/examine/details/api";

export default {
  components: {},
  props: {
    id: {
      type: String,
      default: "",
    },
    customStyle: {
      type:Object,
      default: "margin: 20px 20px 0 0",
    },
  },
  data() {
    // 这里存放数据
    return {
      flows: [],
      firstEnter: true,
    };
  },
  watch: {
    id: {
      handler(val) {
        if (
          this.firstEnter &&
          val !== undefined &&
          val !== null &&
          val !== ""
        ) {
          this.firstEnter = false;

          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    getData() {
      if (!this.notEmpty(this.id)) return;
      FlowRecord({
        id: this.id,
      }).then((res) => {
        this.flows = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
//.commonContainer {
//    width: auto;
//    position: sticky;
//    top: 0;
//}
.timelineItem {
  font-size: 14px;
  font-weight: 500;
  color: #666666;

  .recordContent {
    color: #333333;
    //margin: 0 8px;
  }
}

.approveContent {
  background-color: #f9fbfe;
  padding: 16px;
  border-radius: 4px;
}

::v-deep ul {
  display: block;
  padding-inline-start: 0px;
}

.timeLine_time {
  color: #8c8c8c;
  margin-top: 3px;
}

.dialog_content {
  display: flex;
  justify-content: center;
}

.status {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  .name {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }

  .comp {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
  }

  .time {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}

.timeLineItem {
  box-sizing: border-box;
  padding: 15px;
  background: #f9fbfe;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 20px;
}

.willAudit {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #71767b;
  line-height: 22px;
}

.pass {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #52c41a;
  line-height: 20px;
}

.unpass {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #f5222d;
  line-height: 20px;
}

::v-deep .el-timeline-item__wrapper {
  padding-left: 20px !important;
}
</style>
